<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui同级显示与隐藏</title>
    <link rel="stylesheet" href="./index.css">
    <script src="../jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">演示<span></span></a>
                <ul class="navList">
                    <li>
                        <a href="#">调试预览<span></span></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">布局<span></span></a>
                <ul class="navList">
                    <li>
                        <a href="#">栅格</a>
                    </li>
                    <li>
                        <a href="#">框架</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">基本元素<span></span></a>
                <ul class="navList">
                    <li>
                        <a href="#">按钮</a>
                    </li>
                    <li>
                        <a href="#">表单</a>
                    </li>
                    <li>
                        <a href="#">导航/面包屑</a>
                    </li>
                    <li>
                        <a href="">基础菜单</a>
                    </li>
                    <li>
                        <a href="#">选项卡</a>
                    </li>
                    <li>
                        <a href="#">进度条</a>
                    </li>
                    <li>
                        <a href="#">面板</a>
                    </li>
                    <li>
                        <a href="#">徽章</a>
                    </li>
                    <li>
                        <a href="">时间线</a>
                    </li>
                    <li>
                        <a href="#">静态表格</a>
                    </li>
                    <li>
                        <a href="#">动画</a>
                    </li>
                    <li>
                        <a href="#">辅助元素</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">组件示例<span></span></a>
                <ul class="navList">
                    <li>
                        <a href="#">弹出层</a>
                    </li>
                    <li>
                        <a href="#">日期与时间选择</a>
                    </li>
                    <li>
                        <a href="#">数据表格</a>
                    </li>
                    <li>
                        <a href="#">分页</a>
                    </li>
                    <li>
                        <a href="#">下拉菜单</a>
                    </li>
                    <li>
                        <a href="#">文件上传</a>
                    </li>
                    <li>
                        <a href="#">穿梭框</a>
                    </li>
                    <li>
                        <a href="#">树形组件</a>
                    </li>
                    <li>
                        <a href="#">颜色选择器</a>
                    </li>
                    <li>
                        <a href="#">滑块</a>
                    </li>
                    <li>
                        <a href="">评分</a>
                    </li>
                    <li>
                        <a href="#">轮播</a>
                    </li>
                    <li>
                        <a href="#">模板引擎</a>
                    </li>
                    <li>
                        <a href="#">流加载</a>
                    </li>
                    <li>
                        <a href="#">工具模块</a>
                    </li>
                    <li>
                        <a href="#">文本行修饰</a>
                    </li>
                </ul>
            </li>
            <p></p>
        </ul>
    </div>
    <script>
        $(function() {
            $(".nav>ul>li>a").hover(function() {
                $(this).children("span").addClass("on");
                $(this).addClass("active");

            }, function() {
                $(this).children("span").removeClass("on");
                $(this).removeClass("active");
            })
            $(".nav>ul>li>a").on("click", function() {
                // 属性toggleClass()如果存在（不存在）就删除（添加）一个类。
                $(this).children("span").toggleClass("on on_click");
                $(this).addClass("active");
                $(this).parent("li").children("ul").toggle();
            })

            $(".navList>li>a").on("mouseenter", function() {
                $(this).addClass("active");
            })
            $(".navList>li>a").on("mouseleave", function() {
                    $(this).removeClass("active");
                })
                // 滑动使用position()获取元素的位置
                // 获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性： top 和 left。 为精确计算结果， 请在补白、 边框和填充属性上使用像素单位。 此方法只对可见元素有效。
            $(".navList>li").on("mouseenter", function() {
                let pos = $(this).children("a").position();
                console.log(pos.top);
                $(".nav>ul>p").stop().animate({
                    top: pos.top,
                    height: 50,
                })
            })
            $(".navList>li").on("mouseleave", function() {
                $(".nav>ul>p").stop().animate({
                    height: 0,
                })
            })
        })
    </script>
</body>

</html>